<template>
  <el-dialog v-model="showDialog"
             :title="title"
             :draggable="true"
             :destroy-on-close="true"
             :close-on-click-modal="false"
             @open="openDialog"
             @opened="openedDialog"
             @close="closeDialog(mainInfoRef)"
             @closed="closedDialog"
  >
    <el-form
        :model="mainInfo"
        :rules="mainInfoRules"
        ref="mainInfoRef"
        label-suffix=":"
        label-width="100px"
        status-icon
    >
      <el-form-item label="字典key" prop="dictKey">
        <el-input v-model="mainInfo.dictKey"></el-input>
      </el-form-item>
      <el-form-item label="字典名称" prop="dictName">
        <el-input v-model="mainInfo.dictName"></el-input>
      </el-form-item>
      <el-form-item label="模块" prop="moduleId">
        <el-select v-model="mainInfo.moduleId">
          <el-option v-for="item in moduleData" :label="item.label" :value="item.value"
                     :key="item.key || item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="说明" prop="introduce">
        <el-input v-model="mainInfo.introduce" type="textarea"></el-input>
      </el-form-item>
    </el-form>

    <template #footer >
      <el-button type="primary" @click="confirm(mainInfoRef)" :loading="confirmLoading">保存</el-button>
      <el-button type="danger" @click="closeDialog(mainInfoRef)">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {DIALOG_EDIT, DIALOG_VIEW} from "@/constants/common-constant.ts";
import {reactive, ref, watch} from "vue";
import type {FormInstance, FormRules} from "element-plus";
import {dictDataUtil} from "@/utils/common-request.ts";
import {SYSTEM_MODULE} from "@/constants/dict-constants.ts";
import {elMessageTip, warningMessageTip} from "@/utils/tip-utils.ts";
import {saveMainDictReq} from "@/api/admin/dict.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  dialogType: {
    type: String,
    default: DIALOG_VIEW
  },
  dialogParam: {
    type: Object,
    default: () => {}
  }
})

const emits = defineEmits(['openDialog', 'openedDialog', 'closeDialog', 'closedDialog'])

const showDialog = ref(props.showDialog)

watch(() => props.showDialog, (val: boolean) => {
  showDialog.value = val
})

interface MainInfo {
  id: string;
  dictKey: string;
  dictName: string;
  moduleId: string;
  introduce: string
}

const mainInfo = reactive<MainInfo>({
  id: '',
  dictKey: '',
  dictName: '',
  moduleId: '',
  introduce: ''
})

const mainInfoRules = reactive<FormRules<MainInfo>>({
  dictKey: [
    {required: true, message: '请输入字典key', trigger: 'blur'},
  ],
  dictName: [
    {required: true, message: '请输入字典名称', trigger: 'blur'},
  ],
  moduleId: [
    {required: true, message: '请选择模块', trigger: 'blur'},
  ]
})

const mainInfoRef = ref<FormInstance>();

const moduleData = ref<any>([]);

const confirmLoading = ref<boolean>(false)

const initModuleData = async () => {
  moduleData.value = await dictDataUtil(SYSTEM_MODULE)
}

const initFormData = () => {
  mainInfo.id = props.dialogParam.id
  mainInfo.dictKey = props.dialogParam.dictionaryKey
  mainInfo.dictName = props.dialogParam.dictionaryName
  mainInfo.moduleId = props.dialogParam.moduleId
  mainInfo.introduce = props.dialogParam.introduce
}

const openDialog = () => {
  emits('openDialog')
}

const openedDialog = () => {
  emits('openedDialog')
  initModuleData()
  if (props.dialogType === DIALOG_EDIT) {
    initFormData()
  }
}

const closeDialog = (formEl: FormInstance | undefined) => {
  resetFiled(formEl)
  emits('closeDialog')
}

const closedDialog = () => {
  emits('closedDialog', false)
}

const confirm = async (formEl: FormInstance | undefined) => {
  if(!formEl) return
  await formEl.validate((valid, fields) => {
    if (!valid){
      warningMessageTip("请填写完整信息")
      return;
    } else {
      commonConfirm(formEl)
    }
  })

}

const commonConfirm = async (formEl: FormInstance | undefined) => {
  confirmLoading.value = true
  const params = {
    id: props.dialogParam.id,
    dictionaryKey: mainInfo.dictKey,
    dictionaryName: mainInfo.dictName,
    moduleId: mainInfo.moduleId,
    introduce: mainInfo.introduce
  }
  const res:any = await saveMainDictReq(params)
  elMessageTip(res.tipType, res.message)
  confirmLoading.value = false
  if (res.code === RESPONSE_CODE_SUCCESS) {
    closeDialog(formEl)
  }
}
const resetFiled = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped>

</style>